/**
 * Created by liuxiaotang on 2017-03-01.
 *
 *  slimScroll is a small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.
 *  slimscroll是一个jQuery插件，把任何可滚动的div转换为具有友好滚动条的div - 一个类似于最近Facebook和Google在他们产品的滚动区域滚中使用的东西。slimscroll不占用任何视觉空间，它只出现在用户鼠标经过的时候。用户可以拖动滚动条或使用鼠标滚轮改变滚动值。
 *
 * 基于 jquery.slimScroll.js封装的ng指令
 *
 * 使用方法：在要用滚动条的节点中添加 yg-slim-scroll 属性，data-xxx设置参数，所有参数均非必填参数
 * 实例 ：<div yg-slim-scroll class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2"></div>
 *  具体参数不做介绍，请直接查看jquery.slimScroll.js源码 https://github.com/rochal/jQuery-slimScroll/blob/master/jquery.slimscroll.js
 */

define(['angular', "slimscroll"], function (angular) {
    return angular.module('SlimScroll', []).directive('ygSlimScroll', [function () {
        return {
            restrict: 'A',
            scope: {
                width: '@width',
                height: '@height',
                size: '@size',
                position: '@position',
                color: '@color',
                alwaysVisible: '@alwaysVisible',
                distance: '@distance',
                start: '@start',
                railVisible: '@railVisible',
                railColor: '@railColor',
                railOpacity: '@railOpacity',
                wheelStep: '@wheelStep',
                allowPageScroll: '@allowPageScroll',
                disableFadeOut: '@disableFadeOut'
            },
            link: function (scope, element, attrs) {
                var slimOption = {
                    width: scope.width || 'none',
                    height: scope.height || '100%',
                    size: scope.size || '7px',
                    position: scope.position || 'right',
                    color: scope.color || '#000',
                    alwaysVisible: scope.alwaysVisible || false,
                    distance: scope.distance || '1px',
                    start: scope.start || 'top',
                    railVisible: scope.railVisible || false,
                    railColor: scope.railColor || '#333',
                    railOpacity: scope.width || 0.2,
                    wheelStep: scope.width || 20,
                    allowPageScroll: scope.width || false,
                    disableFadeOut: scope.width || false
                };
                angular.element(element).slimScroll(slimOption);
                $(window).resize(function () {
                    var slimResize = setTimeout(function () {
                        angular.element(element).slimScroll(slimOption);
                    }, 500);
                    clearTimeout(slimResize);
                });
            }
        }
    }]);
});